<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />

    <title></title>
  </head>
  <link rel="stylesheet" type="text/css" href="../css/common.css" />
  <link rel="stylesheet" href="../less/bottomNav.css" />
  <body>
    <div id="content" class="content"></div>
    <div class="bottomBox">
      <ul class="bottomUl">
        <li class="bottomLi bottomLi2" data-path="home">
          <div class="bottomNav homeNor"></div>
          <div class="text">首页</div>
        </li>
        <li class="bottomLi bottomLi2" data-path="find">
          <div class="bottomNav"></div>
          <div class="text">发现</div>
        </li>
        <li class="bottomLi" data-path="add">
          <div class="addNor"></div>
        </li>
        <li class="bottomLi bottomLi2" data-path="shequ">
          <div class="bottomNav"></div>
          <div class="text">社区</div>
        </li>
        <li class="bottomLi bottomLi2" data-path="wode">
          <div class="bottomNav"></div>
          <div class="text">我的</div>
        </li>
      </ul>
    </div>
  </body>

  <script
    src="../js/jquery-3.5.1.min.js"
    type="text/javascript"
    charset="utf-8"
  ></script>
  <script src="../js/rem.js" type="text/javascript" charset="utf-8"></script>
  <script
    src="../bottomNav/router.js"
    type="text/javascript"
    charset="utf-8"
  ></script>
  <script type="text/javascript">
    let bottomImgList = [
      {
        text: "homeNor",
        img: "../img/tabbar_icon_home_nor.png",
      },
      {
        text: "findNor",
        img: "../img/tabbar_icon_find_nor.png",
      },
      {
        text: "shequNor",
        img: "../img/tabbar_icon_community_nor.png",
      },
      {
        text: "wodeNor",
        img: "../img/tabbar_icon_personal%20center_nor.png",
      },
    ];
    $(".bottomNav").each(function (index) {
      $(".bottomNav")
        .eq(index)
        .css("background-image", "url(" + bottomImgList[index].img + ")");
    });
    $(".bottomLi2").each(function (index) {
      $(this).on("click", function () {
        $(".bottomNav").removeClass("homeNor findNor shequNor wodeNor");
        sessionStorage.setItem("index", index);
        $(".bottomNav").eq(index).addClass(bottomImgList[index].text);
      });
    });
    $("#content").load("../shouye.html");
    window.onload = function () {
      var idx = sessionStorage.getItem("index");
      if (idx > 0) {
        $(".bottomNav").removeClass("homeNor");
        $(".bottomNav").eq(idx).addClass(bottomImgList[idx].text);
      }
    };
  </script>
</html>
